<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true" :model="salaryQuery" class="demo-form-inline">
      <el-form-item label="名字">
        <el-select v-model="salaryQuery.userId" filterable clearable placeholder="输入名字">
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.name"
            :value="user.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" style="margin: 10px" @click="handleAdd">添加薪资</el-button>
    <el-button type="primary" style="margin: 10px;float: right" @click="calculate">结算本月薪资</el-button>

    <el-table :data="salaryList" style="width: 100%;margin-top:30px;" border>
      <el-table-column type="expand">
        <template #default="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="名字"><span>{{ props.row.name }}</span></el-form-item>
            <el-form-item label="基本工资"><span>{{ props.row.basicSalary }} 元</span></el-form-item>
            <el-form-item label="奖金"><span>{{ props.row.bonus }} 元</span></el-form-item>
            <el-form-item label="午餐补助"><span>{{ props.row.lunchSalary }} 元</span></el-form-item>
            <el-form-item label="交通补助"><span>{{ props.row.trafficSalary }} 元</span></el-form-item>
            <el-form-item label="养老金基数"><span>{{ props.row.pensionBase }} 元</span></el-form-item>
            <el-form-item label="养老金比率"><span>{{ props.row.pensionPercentage }} %</span></el-form-item>
            <el-form-item label="医疗基数"><span>{{ props.row.medicalBase }} 元</span></el-form-item>
            <el-form-item label="医疗保险比率"><span>{{ props.row.medicalPercentage }} %</span></el-form-item>
            <el-form-item label="公积金基数"><span>{{ props.row.accumulationFundBase }} 元</span></el-form-item>
            <el-form-item label="公积金比率"><span>{{ props.row.accumulationFundPercentage }} %</span></el-form-item>
            <el-form-item label="个人所得税"><span>{{ props.row.individualTax }} 元</span></el-form-item>
            <el-form-item label="工资日期"><span> <el-date-picker readonly v-model="props.row.salaryTime" type="date" placeholder="工资日期"></el-date-picker></span></el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="名字"></el-table-column>
      <el-table-column align="center" prop="basicSalary" label="基本工资"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleRemove(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getSalaryList"
      />
    </div>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Salary':'New Salary'">
      <el-form :model="salary" label-width="160px" label-position="left">
        <el-form-item label="套帐设置" v-if="dialogType==='new'">
          <el-button type="primary" @click="setSalary">套帐一</el-button>
          <el-button type="primary" @click="setSalary">套帐二</el-button>
        </el-form-item>
        <el-form-item label="员工" v-if="dialogType==='new'">
          <el-select v-model="salary.userId" filterable placeholder="输入名字">
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.name"
              :value="user.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="基本工资">
          <el-input v-model="salary.basicSalary" placeholder="基本工资"/>
        </el-form-item>
        <el-form-item label="养老金基数">
          <el-input v-model="salary.pensionBase" placeholder="养老金基数"/>
        </el-form-item>
        <el-form-item label="养老金比率(单位:%)" >
          <el-input v-model="salary.pensionPercentage" placeholder="养老金比率"/>
        </el-form-item>
        <el-form-item label="医疗基数">
          <el-input v-model="salary.medicalBase" placeholder="医疗基数"/>
        </el-form-item>
        <el-form-item label="医疗保险比率(单位:%)">
          <el-input v-model="salary.medicalPercentage" placeholder="医疗保险比率"/>
        </el-form-item>
        <el-form-item label="公积金基数">
          <el-input v-model="salary.accumulationFundBase" placeholder="公积金基数"/>
        </el-form-item>
        <el-form-item label="公积金比率(单位:%)">
          <el-input v-model="salary.accumulationFundPercentage" placeholder="公积金比率"/>
        </el-form-item>
        <el-form-item label="工资日期">
          <el-date-picker
            v-model="salary.salaryTime"
            type="date"
            value-format="timestamp"
            placeholder="工资日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSalary">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { addSalary, calculateSalary, deleteSalary, getSalary, modifySalary } from '@/api/salary'
import { deepClone } from '@/utils'
import { getUserList } from '@/api/user'
import { deleteDepartment } from '@/api/department'

const defaultSalary = {
  id: ''
}

export default {
  name: 'SalaryManager',
  components: {},
  data() {
    return {
      salary: Object.assign({}, defaultSalary),
      salaryList: [],
      userList: [],
      salaryQuery: {},
      statusEnum: [
        {value: 'FALSE', label: "已生效"},
        {value: 'TRUE', label: "未生效"},
      ],
      checkStrictly: false,
      total: 100,
      page: 1,
      limit: 20,
      dialogType: 'new',
      dialogVisible: false,
    };
  },
  methods: {
    async getSalaryList(page = 1){
      const offset = this.limit * (page - 1);
      const res = await getSalary(this.salaryQuery, offset, this.limit)
      this.salaryList = res.data.rows
      this.total = res.data.total
    },
    onSubmit() {
      this.getSalaryList()
    },
    async getUserList() {
      const res = await getUserList()
      this.userList = res.data
    },
    handleAdd() {
      this.salary = Object.assign({}, defaultSalary)
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.salary = deepClone(scope.row)
      this.$nextTick(() => {
        // set checked state of a node not affects its father and child nodes
        this.checkStrictly = false
      })
    },
    async handleRemove(scope) {
      this.$confirm('确定要删除吗?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await deleteSalary(scope.row.id, 'FALSE')
          this.$notify({
            title: 'Success',
            dangerouslyUseHTMLString: true,
            message: '操作成功',
            type: 'success'
          })
        })
        .catch(err => {
          console.error(err)
        })
    },
    async confirmSalary() {
      if ('edit' === this.dialogType) {
        await modifySalary(this.salary.id, this.salary)
        for (let index = 0; index < this.salaryList.length; index++) {
          if (this.salaryList[index].id === this.salary.id) {
            this.salaryList.splice(index, 1, Object.assign({}, this.salary))
            break
          }
        }
      } else {
        await addSalary(this.salary)
      }
      this.dialogVisible = false
      await this.getSalaryList()
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    },
    async calculate() {
      calculateSalary()
      await this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    },
    async setSalary() {
      this.salary = {
        basicSalary: '10000',
        pensionBase: '200',
        pensionPercentage: '2',
        medicalBase: '200',
        medicalPercentage: '2',
        accumulationFundBase: '500',
        accumulationFundPercentage: '5',
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getSalaryList()
    this.getUserList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}

</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
